<!DOCTYPE html>
<html>
	<head>
		<title>D3 Tutorial Test15 Histogram Layout 2</title>
		<script src="d3.min.js"></script>
	</head>
	<body>
	
		<script type="text/javascript">
		
			var width = 500;
			var height = 500;
			var padding = 50;
		
			d3.csv("histogramdata.csv", function(data) {
				
				var map = data.map(function(i) { return parseInt(i.age); }); // To get the age values we're interested in
				
				var histogram = d3.layout.histogram()
											.bins(7) // Number of intervals that we want to display
											(map);   // Source of data
											
				var y = d3.scale.linear() // Vertical scale
									.domain([0, d3.max(histogram.map(function(i) { return i.length; }))])
									.range([0, height]);
											
				var x = d3.scale.linear() // Horizontal scale
									.domain([0, d3.max(map)])
									.range([0, width]);
				
				var xAxis = d3.svg.axis() // Axis
									.scale(x)
									.orient("bottom");
											
				var canvas = d3.select("body")
								.append("svg")
								.attr("width", width)
								.attr("height", height + padding) // To make room for the padding
								.append("g")
									.attr("transform", "translate(20, 0)");
				
				var group = canvas.append("g") // Move the axis below the histogram
									.attr("transform", "translate(0, " + height + ")")
									.call(xAxis);
				
				var bars = canvas.selectAll(".bar")
									.data(histogram)
									.enter()
									.append("g");
				
				bars.append("rect")
						.attr("x", function(d) { return x(d.x); } )
						.attr("y", function(d) { return 500 - y(d.y); } ) // In order to make the histogram go from bottom to top
						.attr("width", function(d) { return x(d.dx); } ) //range property given by histogram object
						.attr("height", function(d) { return y(d.y); } )
						.attr("fill", "steelblue");
				
				bars.append("text")
						.attr("x", function(d) { return x(d.x); } )
						.attr("y", function(d) { return 500 - y(d.y); } )
						.attr("dy", "20px")
						.attr("dx", function(d) { return x(d.dx)/2; } )
						.attr("fill", "white")
						.attr("text-anchor", "middle")
						.text(function(d) { return d.y; } );
				
			});
		
										
		</script>
	</body>
</html>
